<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="./css/index.css"> -->
    <link rel="stylesheet" href="./css/index-public.css">
    <link rel="stylesheet" href="./css/index-iPad.css">
    <link rel="stylesheet" href="./css/index-pc.css">
    <link rel="stylesheet" href="./css/index-mobile.css">
    <title>艺术摄影展示类模板-响应式布局</title>
</head>
<!-- http://www.coolsite360.com/sites/hgtykm/ -->
<body>
    <section class="box">
        <!-- 头部首屏 -->
        <header>
            <!-- 顶部一栏 -->
            <section class="headerTop">
                <!-- logo -->
                <a href="javaScript:0" class="logo"></a>
                
                <!-- 菜单按钮和关闭按钮 -->
                <i class="menu"></i>
                <!-- 导航 -->
            </section>
            <!-- 导航 -->
            <nav>
                <ul>
                    <li class="navLiActive"><a href="#">首页</a></li>
                    <li><a href="#">关于</a></li>
                    <li><a href="#">资讯</a></li>
                    <li><a href="#">案例</a></li>
                    <li><a href="#">照片墙</a></li>
                    <li><a href="#">联系</a></li>
                </ul>
            </nav>
            <!-- 首屏标题 -->
            <section class="posterContainer">
                <section class="posterTitle">
                    <h3>艺术灵感源自生活</h3>
                    <div class="titleDescription figcaption">
                        <p>艺术的审美特性是区别于其他社会实践活动的根本标志。所谓审美特性，是指艺术作品所具有的美学品质和审美价值。艺术作品是艺术家审美理想的结晶，是美的创造的结果。</p>
                    </div>
                    <div class="posterBtn">
                        <a href="#" class="readMore">Read More</a>
                        <a href="#" class="contactUs">Contact Us</a>
                    </div>
                </section>
            </section>
        </header>
        <!-- 艺术理念板块 -->
        <section class="liNianContainer">
            <section class="liNian">
                <!-- ./images/艺术理念.jpg -->
                <img src="./images/艺术理念.jpg" alt="">
                <section class="liNianBox">
                    <section class="LiNianDirectionTitle">
                        <h4>艺术理念</h4>
                        <span>ABOUT US</span>
                    </section>
                    <div class="LiNianDirection">
                        <p class="figcaption">艺术可以是宏观概念也可以是个体现象，通过捕捉与挖掘、感受与分析、整合与运用（形体的组合过程、生物的生命过程、故事的发展过程）通过感受（看、听、嗅、触碰）得到的形式展示出来的阶段性结果...</p>
                        <p class="figcaption selectBox">形象把握与理性把握的统一</p>
                        <p class="figcaption selectBox">艺术的审美特性是区别于其他社会实践活动的根本标志</p>
                    </div>
                    <a href="#" class="btn btn_03">Read More</a>
                </section>
            </section>
        </section>
        <!-- 资讯中心 -->
        <section class="NewContainer">
            <section class="NewBox">
                <!-- 资讯中心区域的标题 -->
                <div class="NewTitle">
                    <H4>资讯中心</H4>
                    <span>NEWS CENTER</span>
                </div>
                <!-- 资讯中心内容区域 -->
                <div class="NewContent">
                    <ul class="clearFloat">
                        <li>
                            <a href=""><img src="./images/new_1.jpg" alt=""></a>
                            <p><span class="name">Stephen Amell</span><span class="data">2021-3-16</span></p>
                            <!-- 资讯中心每一项的描述 -->
                            <div class="newprojectDescribe">
                                <h5>艺术可以是宏观概念也可以是个体现象，通过捕捉与挖掘、感受与分析的过程</h5>
                                <p>在进行照相时，光通过小孔（更多时候是一个透镜组）进入暗盒，在暗盒背部（相对于光入射方向）的介质上成像。根据实际光强度和介质感光能力的不同，要求的光照时间也不同。在光照过程中，介质被感光</p>
                                <a href="#" class="newBtn">Read More</a>
                            </div>
                        </li>
                        <li>
                            <a href=""><img src="./images/new_2.jpg" alt=""></a>
                            <p><span class="name">Oliver Queen</span><span class="data">2021-3-16</span></p>
                            <!-- 资讯中心每一项的描述 -->
                            <div class="newprojectDescribe">
                                <h5> 白俄罗斯当代摄影展《独立日》在重庆开展</h5>
                                <p>在进行照相时，光通过小孔（更多时候是一个透镜组）进入暗盒，在暗盒背部（相对于光入射方向）的介质上成像。根据实际光强度和介质感光能力的不同，要求的光照时间也不同。在光照过程中，介质被感光</p>
                                <a href="#" class="newBtn">Read More</a>
                            </div>
                        </li>
                        <li>
                            
                            <a href=""><img src="./images/new_3.jpg" alt=""></a>
                            <p><span class="name">Stephen Amell</span><span class="data">2021-3-16</span></p>
                            <!-- 资讯中心每一项的描述 -->
                            <div class="newprojectDescribe">
                                <h5>图片报道|山水|生态文明建设|摄影</h5>
                                <p>在进行照相时，光通过小孔（更多时候是一个透镜组）进入暗盒，在暗盒背部（相对于光入射方向）的介质上成像。根据实际光强度和介质感光能力的不同，要求的光照时间也不同。在光照过程中，介质被感光</p>
                                <a href="#" class="newBtn">Read More</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
        </section>
        <!-- 服务支持 -->
        <section class="serviceContainer">
            <!-- 背景的遮罩层 -->
            <div class="mask"></div>
            <section class="serviceBox">
                <div class="serviceTitle">
                    <h4>服务支持</h4>
                    <span>OUR SERVICE</span>
                </div>
                <div class="serviceObj">
                    <ul>
                        <li>
                            <i class="serviceIco1"></i>
                            <h6>私人定制服务</h6>
                            <p>美国预测的“改变未来的十技”中，“个性定制”被排在首位，这个判断是来自于市场的变化趋势.</p>
                        </li>
                        <li>
                            <i class="serviceIco2"></i>
                            <h6>宣传片广告服务</h6>
                            <p>广告不仅对广告主有利，而且对目标.对象也有好处，它可使用户和消费者得到有用的信息.</p>
                        </li>
                        <li>
                            <i class="serviceIco3"></i>
                            <h6>品牌包装服务</h6>
                            <p>专业的营销人才能够在最短的时间帮.对象也有好处，它可使用户和消费者得到有用的信息.助企业提升品牌知名度，而且也能够节约企业走“弯路”的成本.</p>
                        </li>
                        <li>
                            <i class="serviceIco4"></i>
                            <h6>高端摄影服务</h6>
                            <p>摄影将会充分利用电脑的强大优势以，崭新的面目和姿态在信息传播领域发挥新的独特重要作用.</p>
                        </li>
                    </ul>
                </div>
            </section>
        </section>
        <!-- 精品案例 -->
        <section class="caseContainer">
            <section class="caseTitle">
                <h4>精品案例</h4>
                <span>HOT ITEM</span>
            </section>
            <section class="LBTbox">
                <ul class="clearFloat gd">
                    <li><img src="./images/case_4.jpg" alt=""></li>
                    <li><img src="./images/case_5.jpg" alt=""></li>
                    <li><img src="./images/case_1.jpg" alt=""></li>
                    <li><img src="./images/case_2.jpg" alt=""></li>
                    <li><img src="./images/case_3.jpg" alt=""></li>
                    <li><img src="./images/case_4.jpg" alt=""></li>
                    <li><img src="./images/case_5.jpg" alt=""></li>
                    <li><img src="./images/case_1.jpg" alt=""></li>
                </ul>
                <button class="up"></button>
                <button class="next"></button>
            </section>
        </section>
        <!-- 照片墙 -->
        <section class="photoWall">
            <section class="photoWallTitle">
                <h4>照片墙</h4>
                <span>PHOTO GALLERY</span>
                <p>照片墙在居家设计中有着重要的意义，现在也有越来越多的家庭在装修的时候为自己家设计一组漂亮的照片墙，这些照片墙可以表达不同的形式，让家居氛围更加温馨，如果你也喜欢照片墙可以选一些自己喜欢的照片或者装饰画，错落有致的挂在家中的墙面上，不仅温馨有趣，也为家装增添了个性的元素。</p>
            </section>
            <section class="photo">
                <ul class="clearFloat">
                    <li><img src="./images/case_1.jpg" alt=""></li>
                    <li><img src="./images/case_2.jpg" alt=""></li>
                    <li><img src="./images/case_3.jpg" alt=""></li>
                    <li><img src="./images/case_4.jpg" alt=""></li>
                    <li><img src="./images/case_5.jpg" alt=""></li>
                    <li><img src="./images/new_1.jpg" alt=""></li>
                    <li><img src="./images/new_2.jpg" alt=""></li>
                    <li><img src="./images/new_3.jpg" alt=""></li>
                    <li><img src="./images/case_7.jpg" alt=""></li>
                    <li><img src="./images/case_8.jpg" alt=""></li>
                    <li><img src="./images/case_9.jpg" alt=""></li>
                    <li><img src="./images/header_bg.jpg" alt=""></li>
                </ul>
            </section>
        </section>
        <!-- 尾部 -->
        <footer>
            <section class="explain clearFloat">
                <section class="explainBox">
                    <div class="explainLeft">
                        <img src="./images/logo.png" alt="">
                        <p>艺术可以是宏观概念也可以是个体现象，通过捕捉与挖掘、感受与分析、整合与运用形体的组合过程、生物的生命过程、故事的发展...</p>
                    </div>
                    <div class="bootomNav">
                        <ul>
                            <li>网站首页</li>
                            <li>精品案例</li>
                            <li>走进Arrow</li>
                            <li>照片墙</li>
                            <li>新闻资讯</li>
                            <li>联系为我们</li>
                        </ul>
                    </div>
                </section>
            </section>
            <!-- 声明 -->
            <section class="statement">
                <section class="statementBox">
                    <p>© 2021 艺术摄影作品展示类模版 - ChenhuiGT. All Rights Reserved.</p>
                    <p>本网页素材源自素材网站，如有侵权请联系客服.</p>
                    <p>技术支持：</p>
                </section>
            </section>
        </footer>
    </section>
</body>
<script src="./js/js.js"></script>
</html>
<!-- 背景视差滚动 https://blog.csdn.net/qq_36611526/article/details/105866629 -->